<script setup></script>
<template>
  <div class="container">
    <div class="content">
      <div class="left">
        <div class="introduce">
          <h1>欢迎来到乐居汇看房网</h1>
          <h3>乐居汇提供全面的房屋租赁服务，帮助您快速找到心仪的房源</h3>
          <router-link :to="{ path: '/login', query: { isRegister: true } }">
            <el-button size="large" type="primary">立即注册</el-button>
          </router-link>
          <router-link :to="{ path: '/login', query: { isRegister: false } }">
            <el-button size="large" type="info">登录</el-button>
          </router-link>
        </div>
      </div>

      <div class="image"></div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.container {
  background-color: #ffffff;
  width: auto;
  height: 800px;

  .content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 100px 150px;

    .left {
      width: 700px;
      height: 700px;
      display: flex;
      justify-content: center;
      align-items: center;

      .introduce {
        text-align: center;

        h1 {
          font-size: 60px;
          font-weight: bold;
        }

        h3 {
          font-size: 25px;
          margin: 20px 0;
          font-weight: normal;
        }

        button {
          width: 150px;
          height: 50px;
          margin: 30px;
          font-size: 16px;
          font-weight: bold;
        }
      }
    }

    .image {
      width: 400px;
      height: 400px;
      border-radius: 10px;
      background: url('@/assets/images/index-middle.webp') no-repeat center
        center;
      background-color: transparent;
      background-size: cover;
      transition:
        transform 2s ease,
        box-shadow 2s ease;

      &:hover {
        transform: translateY(-5px) scale(1.1); // 垂直位移和轻微缩放
        transition:
          transform 1s ease,
          box-shadow 1s ease; // 仅过渡需要的属性
        box-shadow:
          0 10px 20px rgba(0, 0, 0, 0.5),
          0 6px 6px rgba(0, 0, 0, 0.5); // 改进阴影效果
      }
    }
  }
}
</style>
